<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发表帖子 - ${block.name } - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/createtopic.css" >
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="search" method="post" onsubmit="return isEmpty()">
			<input  id="search" name="search" type="text" value="" placeholder="请输入搜索内容">
		    <button type="submit" class="submit">搜索</button>
		</form>
		<script type="text/javascript">
			function isEmpty() {
				if(document.getElementById("search").value == "") {
					$('<div>').appendTo('body').addClass('alert alert-info').html("请输入搜索内容").show().delay(1500).fadeOut();
					return false;
				}
				return true;
			}
		</script>
		<c:if test="${user != null }">
			<div class="user">
				<span><a style="font-weight: 800;color: black;" href="userinfo">${user.username }</a></span>
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">我的<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="user?id=${user.id }&selected=mytopic">帖子</a></li>
						<!-- <li><a href="#">收藏</a></li>
						<li><a href="#">好友</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="userinfo">设置</a></span>
				<!-- <span>|</span>
				<span><a href="#">消息</a></span> -->
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">提醒<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="notice">消息</a></li>
						<!-- <li><a href="#">新听众</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="exit">退出</a></span>
				<c:if test="${user.avatar != null && user.avatar != '' }">
					<img class="avatar" src="${user.avatar }">
				</c:if>
				<c:if test="${user.avatar == null || user.avatar == '' }">
					<img class="avatar" src="static/image/noavatar.jpg">
				</c:if>
			</div>
		</c:if>
		<c:if test="${user == null }">
			<div class="visitor">
				<a href="ps.login">登陆</a>
				<a href="${path }/register.jsp">注册</a>
			</div>
		</c:if>
	</div>
	<div class="contral">
		<div class="title">
			<a href="forum" class="nvhm" title="首页"></a>
			<em></em>
			<a href="forum">论坛</a>
			<em></em>
			<a>${partition.name }</a>
			<em></em>
			<a href="block?bid=${block.id }">${block.name }</a>
			<em></em>
			<c:if test="${operation == 'createTopic' }">
				<a>发表帖子</a>
			</c:if>
			<c:if test="${operation == 'updateTopic' }">
				<a>编辑帖子</a>
			</c:if>
		</div>
		<div class="head">
			<div style="height: 35px; margin-bottom: 10px;">
				<c:if test="${operation == 'createTopic' }">
					<label>发表帖子</label>
				</c:if>
				<c:if test="${operation == 'updateTopic' }">
					<label>编辑帖子</label>
				</c:if>
				<div></div>
			</div>
		</div>
		<div class="mn">
			<c:if test="${operation == 'createTopic' }">
				<form action="createTopic" method="post" onsubmit="return getContentHTML()">
					<input type="hidden" name="uid" value="${user.id }">
					<input type="hidden" name="bid" value="${block.id }">
					<input type="hidden" name="token" value="${token }">
					<input id="title" name="title" type="text" maxlength="80" value="${topic.title }"><span>标题最多80个字符</span>
					<textarea id="content" name="content" style="display: none" rows="" cols=""></textarea>
					<textarea id="contentText" name="contentText" style="display: none" rows="" cols=""></textarea>
					<div id="editor">
						
				    </div>
				    <button type="submit" id="btn1">发表帖子</button>
				</form>
			</c:if>
			<c:if test="${operation == 'updateTopic' }">
				<form action="updateTopic" method="post" onsubmit="return getContentHTML()">
					<input type="hidden" name="uid" value="${user.id }">
					<input type="hidden" name="id" value="${topic.id }">
					<input id="title" name="title" type="text" maxlength="80" value="${topic.title }"><span>标题最多80个字符</span>
					<textarea id="content" name="content" style="display: none" rows="" cols=""></textarea>
					<textarea id="contentText" name="contentText" style="display: none" rows="" cols=""></textarea>
					<div id="editor">
						
				    </div>
				    <button type="submit" id="btn1">保存</button>
				</form>
			</c:if>
		    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
		    <script type="text/javascript" src="static/js/wangEditor.min.js"></script>
		    <script type="text/javascript">
		        var E = window.wangEditor
		        var editor = new E('#editor')
		        // 或者 var editor = new E( document.getElementById('editor') )
		        
		        //editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
		        editor.customConfig.uploadImgServer = '${path}/upload'  // 上传图片到服务器
	        	editor.customConfig.uploadFileName = 'images';
		        editor.customConfig.uploadImgHooks = {
	        	    customInsert: function (insertImg, result, editor) {
       	                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
       	                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
       	         
       	                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
       	                var url =result.data;
       	                insertImg(url);
       	                /* var index = url.lastIndexOf("/");
       	                alert(url.substring(index+1)); */
       	         
       	                // result 必须是一个 JSON 格式字符串！！！否则报错
       	            }
       	        }
		        
		        editor.create();
		        
		        if(${topic.content != ""}) {
		        	editor.txt.clear();
		        	editor.txt.html('${topic.content}');
		        }
		        
                //document.getElementById('btn1').addEventListener('click', function () {
	    	        // 读取 html
	    	        //alert(editor.txt.html());
	    	        //alert(editor.txt.text());
	    	    //}, false)
	    	    
	    	    function getContentHTML() {
                	//alert(editor.txt.html().replace("&nbsp;", ""));
                	//alert(editor.txt.text() == "" || editor.txt.text().replace("&nbsp;", "") == "");
					if(document.getElementById('title').value == "") {
						$('<div>').appendTo('body').addClass('alert alert-info').html('请输入标题').show().delay(1500).fadeOut();
						return false;
					} else if(editor.txt.text() == "" || editor.txt.text().replace("&nbsp;", "") == "") {
						if(editor.txt.html().indexOf("img") != -1) {
							$('<div>').appendTo('body').addClass('alert alert-info').html('请输入内容(不能发纯图片帖子)').show().delay(1500).fadeOut();
						} else {
							$('<div>').appendTo('body').addClass('alert alert-info').html('请输入内容').show().delay(1500).fadeOut();
						}
						return false;
					} else if(document.getElementById('title').value.length > 80) {
						$('<div>').appendTo('body').addClass('alert alert-info').html('标题多于80字').show().delay(1500).fadeOut();
						return false;
					} else if(document.getElementById('title').value.replace(/[^\x00-\xff]/g,"01").length < 8) {
						$('<div>').appendTo('body').addClass('alert alert-info').html('标题少于8字符').show().delay(1500).fadeOut();
						return false;
					}
					document.getElementById('content').value = editor.txt.html();
					document.getElementById('contentText').value = editor.txt.text();
					return true;
				}
                
		    </script>
		    
		</div>
	</div>
	
	<div id="msg" class="alert alert-info" style="display: none;"></div>
</body>
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript">
	/* var UnloadConfirm = {};
	UnloadConfirm.MSG_UNLOAD = "数据尚未保存，离开后可能会导致数据丢失\n\n您确定要离开吗？";
	UnloadConfirm.set = function(a) {
	    window.onbeforeunload = function(b) {
	        b = b || window.event;
	        b.returnValue = a;
	        return a;
	    }
	};
	UnloadConfirm.clear = function() {
	    fckDraft.delDraftById();
	    window.onbeforeunload = function() {}
	};
	UnloadConfirm.set(UnloadConfirm.MSG_UNLOAD); */
</script>
<script type="text/javascript">
	var msg = '${msg}';
	if(msg != "") {
		$('#msg').appendTo('body').html(msg).show().delay(3000).fadeOut();
	}
</script>
</html>